<template>
  <div id="salvenote">
    <div class="page-header">
      <span class="title-item">领用审批</span>
      <span class="download-btn" style="color: #40a9ff">
        <a-icon type="cloud-download" />导出数据
      </span>
    </div>

    <div class="table-form">
      <my-table style="min-height: 96%" :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="false">
        <template slot="comparatorStatus" slot-scope="comparatorStatus">
          {{comparatorStatus|comparatorStatusFilt}}
        </template>
        <span slot="action" slot-scope="text,record,index">
          <!--<a class="solvebtn">申领详情</a>-->
          <a-button type="primary" class="add-btn" @click="passFnSingle(text,record,index)">通过</a-button>
          <a-button type="danger" @click="refuseFnSingle(text,record,index)">驳回</a-button>
        </span>
      </my-table>
      <div class="bottompage">
        <div>
          <a-button type="primary" class="add-btn" @click="passAll()">通过</a-button>
          <a-button type="danger" @click="refuseAll()">驳回</a-button>
        </div>
        <div class="page-box">
          <a-pagination :show-total="total => `共 ${total}条记录`" v-model="current" :total="total" :defaultPageSize="size" :item-render="itemRender" @change="pagechangeFn"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      data: [],
      columns: [
        {
          title: "序号",
          dataIndex: "comparatorId",
          width: "5%",
          align: "center",
          customRender: (text, record, index) =>
            `${(this.current - 1) * this.size + index + 1}`,
        },
        {
          title: "设备名称",
          dataIndex: "comparatorName",
          align: "center",
        },
        {
          title: "设备编号",
          dataIndex: "comparatorMn",
          align: "center",
        },
        {
          title: "设备状态",
          dataIndex: "comparatorStatus",
          scopedSlots: { customRender: "comparatorStatus" },
          align: "center",
        },
        {
          title: "申领时间",
          dataIndex: "createTime",
          width: "15%",
          align: "center",
        },
        // {
        //   title: "申领信息",
        //   children: [
        //     {
        //       title: "领用部门",
        //       dataIndex: "areaName",
        //       width: "15%",
        //       align: "center",
        //     },
        //     {
        //       title: "使用项目",
        //       dataIndex: "userProject",
        //       width: "15%",
        //       align: "center",
        //     },
        //     {
        //       title: "申领时间",
        //       dataIndex: "createTime",
        //       width: "15%",
        //       align: "center",
        //     },
        //   ],
        // },
        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          width: "20%",
          align: "center",
        },
      ],
      current: 1,
      total: 0,
      size: 10,
      delall: [],//选中的条项id属性列表
      delList: [],
      userId:''
    };
  },
  filters:{
    comparatorStatusFilt(index){
      return ["申请中","通过","驳回","退回"][index]
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(selectedRowKeys, selectedRows);
          this.delall = selectedRows;
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },

  mounted() {
    this.getId();
    this.recordList();
  },

  methods: {
    getId(){
      this.userId = this.$user.id;
    },
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.current = page;
      this.recordList();
    },
    // 申领记录
    recordList() {
      this.$api
        .PostlistRecipientsDetails({
          currentPage: this.current,
          pageSize: this.size,
          userId:this.userId
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 0) {
            this.data = res.data.data.records;
            this.total = res.data.data.total;
            this.data.forEach((v) =>{
              v.returnTime = moment(v.returnTime).format("YYYY-MM-DD");
              v.createTime = moment(v.createTime).format("YYYY-MM-DD")
            })
          }
        });
    },
    // 单个通过按钮事件
    passFnSingle(data, index) {
      console.log(data, index);
      this.$api.PostauditOneComparator({ id: data.comparatorId, isAgree: 1 }).then((res) => {
        if(res.data.code === 0){
          this.$message.info("通过成功");
          this.recordList();
        }else {
          this.$message.info("通过失败");
        }
          console.log(res);
        });

    },
    // 单个驳回按钮事件
    refuseFnSingle(data, index) {
      this.$api.PostauditOneComparator({ id: data.comparatorId, isAgree: 2 })
        .then((res) => {
          if(res.data.code === 0){
            this.$message.info("退回成功");
            this.recordList();
          }else {
            this.$message.info("退回失败");
          }
          console.log(res);
        });
    },
    // 批量通过事件
    passAll() {
      this.delall.forEach((v) => {
        this.delList.push(v.id);
      });
      console.log(this.delList);
      this.$api.PostauditListComparator({ idList: this.delList, isAgree: true })
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success(res.data.data);
            this.recordList();
          } else {
            this.$message.error(res.data.data);
          }
          console.log(res);
        });
    },
    // 批量驳回事件
    refuseAll() {
      this.delall.forEach((v) => {
        this.delList.push(v.id);
      });
      this.$api
        .PostauditListComparator({ idList: this.delList, isAgree: false })
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success(res.data.data);
            this.recordList();
          } else {
            this.$message.error(res.data.data);
          }
          console.log(res);
        });
    },
  },
};
</script>
<style scoped src="../../../assets/style/warning.css"></style>
<style scoped lang="scss" >
.add-btn{
  margin: 0 20px;
}
#salvenote {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  .page-header{
    margin: 0;
    padding: 0;
  }
}
.solve-img {
  display: flex;
  justify-content: space-evenly;
}

#salvenote .solvebtn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: #2c6a5f;
}


.bottompage {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
::v-deep.ant-form-item-control {
  width: 200px;
}

/* 分页 */
::v-deep .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
//::v-deep#salvenote .ant-table-thead > tr:last-child > th {
//  background: #225149 !important;
//  // color: #1c2c2c !important;
//  border: 0;
//}
::v-deep#salvenote
  .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-tbody
  > tr
  > td:nth-child(5) {
  border-left: 1px solid #2c6a5f !important;
}
::v-deep#salvenote
  .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-tbody
  > tr
  > td:nth-child(8) {
  border-left: 1px solid #2c6a5f !important;
}
::v-deep#salvenote
  .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-tbody
  > tr
  > td:nth-child(10) {
  border-left: 1px solid #2c6a5f !important;
}
::v-deep#salvenote
  .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-thead
  > tr
  > th:nth-child(1) {
  border-left: 1px solid #2c6a5f !important;
}
::v-deep#salvenote
  .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-thead
  > tr
  > th:nth-child(4) {
  border-left: 1px solid #2c6a5f !important;
}
::v-deep#salvenote
  .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-thead
  > tr
  > th:nth-child(6) {
  border-left: 1px solid #2c6a5f !important;
}
</style>
